<template>
  <view class="rename-modal" v-if="show">
    <Modal
      :title="title"
      :visible="show"
      :ok-disabled="!nameCorrect"
      :cancel-text="cancelText"
      :ok-text="okText"
      :bottom-offset="inputBottom"
      @ok="confirmRename"
      @cancel="cancelRename"
    >
      <view class="input-rename-box">
        <view class="input-box">
          <input
            type="text"
            confirm-type="done"
            class="input-rename"
            :value="tempName"
            :focus="tempFocus"
            @input="editName"
            @blur="blur"
            @keyboardheightchange="keyboardheightchange"
          />
        </view>
        <view class="nameHint">
          <view v-if="!tempFocus && tempName == ''">
            <image src="/static/icon_inputting_remind.png" class="errorIcon" />
            <view class="idError">只支持中英文、数字</view>
          </view>
          <view v-else>
            <image v-if="!nameCorrect" src="/static/icon_error_warning.png" class="errorIcon" />
            <view v-if="!nameCorrect" class="errorHint idError">
              {{ nameError }}
            </view>
          </view>
        </view>
      </view>
    </Modal>
  </view>
</template>
<script setup lang="ts">
import Modal from '@/common/modal.vue'

const props = defineProps<{
  show: boolean
  title: string
  okText: string
  cancelText: string
  nickName: string
  nameFocus: boolean
  inputType?: string
  errorTips?: string
  noRepeatList?: string[]
}>()
const emit = defineEmits<{
  (e: 'confirm', nickName: string, inputType?: string): void
  (e: 'update:show', show: boolean): void
  (e: 'cancel'): void
}>()

const tempName = ref('')
const tempFocus = ref(true)
const nameCorrect = ref(false)
const nameError = ref('')

watch(
  () => props.show,
  (show) => {
    if (show) {
      tempName.value = props.nickName
      nextTick(() => (tempFocus.value = true))
      checknickname(props.nickName)
    }
  }
)

function confirmRename() {
  emit('confirm', tempName.value, props.inputType)
}
function cancelRename() {
  emit('update:show', false)
  emit('cancel')
}
function blur() {
  tempFocus.value = false
}
/**
 * 编辑名称
 * @param e
 */
function editName(e: Event) {
  tempName.value = (e as unknown as WechatMiniprogram.Input).detail.value
  checknickname(tempName.value)
}
/**
 * 校验名称
 */
const NAME_ERROR_LONG = '名称过长，请控制在8个字符以内'
const ROOMNAME_ERROR_LONG = '名称过长，请控制在6个字符以内'
const BIWDADDFAVORITE_ERROR_LONG = '名称过长，请控制在5个字符以内'
const NAME_ERROR_INVALIDICON = '不支持特殊字符'
const NAME_ERROR_EMPTY = '请输入名称'
const NAME_ERROR_SAME = '名称重复'

function checknickname(name: string) {
  let maxLengthName = 8
  let pattern = /^[\u4e00-\u9fa5_a-zA-ZüöäÜÖÄß0-9!#$&;=?[\]_~%]{0,8}$/
  if (props.inputType == 'room') {
    maxLengthName = 6
    pattern = /^[\u4E00-\u9FA5A-Za-z0-9]{0,6}$/
  } else if (props.inputType === 'biwdAddFavorite') {
    maxLengthName = 5
    pattern = /^[\u4E00-\u9FA5a-zA-Z0-9]{0,10}$/
  }

  let renameFlag = false
  if (props.noRepeatList && props.noRepeatList.length > 0) {
    renameFlag = props.noRepeatList.some((item) => item === name)
  }
  if (name.length == 0) {
    nameError.value = NAME_ERROR_EMPTY
    nameCorrect.value = false
  } else if (props.inputType !== 'biwdAddFavorite' && name.length > maxLengthName) {
    nameError.value = props.inputType == 'room' ? ROOMNAME_ERROR_LONG : NAME_ERROR_LONG
    nameCorrect.value = false
  } else if (props.inputType === 'biwdAddFavorite' && getBLen(name) > maxLengthName) {
    nameError.value = BIWDADDFAVORITE_ERROR_LONG
    nameCorrect.value = false
  } else if (renameFlag) {
    nameError.value = NAME_ERROR_SAME
    nameCorrect.value = false
  } else {
    if (pattern.test(name)) {
      nameError.value = ''
      nameCorrect.value = true
    } else {
      nameError.value = NAME_ERROR_INVALIDICON
      nameCorrect.value = false
    }
  }
  return nameCorrect.value
}

const inputBottom = ref('')
function keyboardheightchange(e: WechatMiniprogram.InputKeyboardHeightChange) {
  let height = e.detail.height + 'rpx'
  inputBottom.value = height
}
defineExpose<{
  checknickname(name: string): boolean
}>({
  checknickname,
})

/**
 * 获取字符串字符长度
 */
function getBLen(val: string) {
  var len = 0
  for (var i = 0; i < val.length; i++) {
    var a = val.charAt(i)
    if (a.match(/[^\x00-\xff]/gi) != null) {
      len += 1
    } else {
      len += 0.5
    }
  }
  return len
}
</script>
<style scoped lang="less">
.rename-modal {
  //重命名
  .input-rename-box {
    .input-box {
      position: relative;

      .input-rename {
        height: 80rpx;
        line-height: 80rpx;
        background-color: #e9e9ed;
        text-align: left;
        padding-left: 30rpx;
        padding-right: 80rpx;
        box-sizing: border-box;
      }

      .icon-box {
        width: 80rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9;

        .show-icon {
          width: 36rpx;
          height: 36rpx;
        }
      }
    }

    .nameHint {
      margin-top: 10rpx;

      .idError {
        font-size: 22rpx;
        color: #656b7b;
        margin-left: 10rpx;
      }

      .errorIcon {
        width: 30rpx;
        height: 30rpx;
      }
    }

    .nameHint > view {
      display: flex;
      align-items: center;
    }
  }
}
</style>
